<template>
    <el-card shadow="never">
        <div class="title-pending">
            <div class="long-string"></div>
            <span>待处理服务 编辑服务信息</span>
        </div>

        <div class="divider"></div>

        <div class="content-title">
            <span class="title-word">居民信息</span>

            <el-form :model="formItem" style="margin-top: 30px;">
                <el-row class="row-item">
                    <el-form-item label="姓名">
                        <el-input v-model="formItem.name" style="width: 200px;height: 40px;" disabled
                            placeholder="李小明" />
                    </el-form-item>

                    <el-form-item label="身份证号码">
                        <el-input v-model="formItem.IdCard" style="width: 200px;height: 40px;" type="text" clearable />
                    </el-form-item>

                    <el-form-item label="性别">
                        <el-select v-model="formItem.organization" placeholder="请选择" clearable>
                        </el-select>
                    </el-form-item>
                </el-row>

                <el-row class="row-item">

                    <el-form-item label="出生年月">
                        <el-date-picker v-model="value1" style="width: 200px;height: 40px;" type="date"
                            placeholder="请选择" :size="size" />
                    </el-form-item>

                    <el-form-item label="电话号码">
                        <el-input v-model="formItem.phone" type="number" style="width: 200px;height: 40px;" clearable />
                    </el-form-item>

                    <el-form-item label="现居地">
                        <el-input v-model="formItem.text" type="text" style="width: 300px;height: 40px;" clearable />
                    </el-form-item>
                </el-row>

                <el-row class="row-item">
                    <el-form-item label="居民标签" class="el-select">
                        <el-select v-model="formItem.organization" placeholder="请选择" clearable>
                        </el-select>
                    </el-form-item>
                </el-row>

                <div class="content-item" style="display: flex;">
                    <span class="span-item">家庭成员</span>
                    <el-row class="row-el">

                        <div class="message-item">
                            <el-avatar :icon="UserFilled" style="width: 40px; height: 40px; margin-top: 6px;" />
                            <div class="item-row">
                                <p>
                                    <span style="font-size:16px;font-weight: 400;">李清</span>
                                    <span style="font-size:12px;color:#999999; margin-left: 5px;">58岁</span>
                                </p>
                                <p>
                                    <span style="font-size: 12px; color: #999999;">关系:父母</span>
                                </p>
                            </div>
                            <img src="../../../assets/n.png" alt="" style="width: 15px; height: 15px; margin-top: 8px;">
                        </div>


                        <div class="message-item">
                            <el-avatar :icon="UserFilled" style="width: 40px; height: 40px; margin-top: 6px;" />
                            <div class="item-row">
                                <p>
                                    <span style="font-size:16px;font-weight: 400;">王林</span>
                                    <span style="font-size:12px;color:#999999; margin-left: 5px;">28岁</span>
                                </p>
                                <p>
                                    <span style="font-size: 12px; color: #999999;">关系:夫妻</span>
                                </p>
                            </div>
                            <img src="../../../assets/n.png" alt="" style="width: 15px; height: 15px; margin-top: 8px;">
                        </div>


                        <el-button link plain @click="dialogFormVisible = true" type="primary">+关联家庭成员</el-button>

                        <el-dialog class="dialog-el" v-model="dialogFormVisible" title="关联家庭成员" width="360px">
                            <el-form :model="form" class="dialog-form">

                                <el-form-item label="选择成员">
                                    <el-select v-model="form.region" placeholder="请选择" filterable>
                                        <el-option label="王皓" value="王皓" />
                                        <el-option label="胡曼" value="胡曼" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="选择关系">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="父母" value="父母" />
                                        <el-option label="配偶" value="配偶" />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <template #footer>
                                <div class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible = false">
                                        确定
                                    </el-button>
                                </div>
                            </template>
                        </el-dialog>
                    </el-row>
                </div>
            </el-form>


            <div class="divider"></div>

            <div class="content-title">
                <span class="title-word">签约信息</span>
                <el-form style="margin-top: 30px;">
                    <el-row class="row-item-tow">
                        <el-form-item label="签约编号">
                            <span style="width: 200px;">11111111111111</span>
                        </el-form-item>

                        <el-form-item label="签约状态">
                            <span style="width: 200px">待审核</span>
                        </el-form-item>


                        <el-form-item label=" 签约机构">
                            <el-select v-model="form.region" placeholder="请选择" filterable>
                                <el-option label="王皓" value="王皓" />
                                <el-option label="胡曼" value="胡曼" />
                            </el-select>
                        </el-form-item>
                    </el-row>

                    <el-row>
                        <el-form-item label="签约团队">
                            <el-select v-model="form.region" placeholder="请选择" filterable>
                                <el-option label="王皓" value="王皓" />
                                <el-option label="胡曼" value="胡曼" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="签约医生">
                            <el-select v-model="form.region" placeholder="请选择" filterable>
                                <el-option label="王皓" value="王皓" />
                                <el-option label="胡曼" value="胡曼" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="服务包">
                            <el-select v-model="form.region" placeholder="请选择" filterable>
                                <el-option label="王皓" value="王皓" />
                                <el-option label="胡曼" value="胡曼" />
                            </el-select>
                        </el-form-item>
                    </el-row>

                    <el-row>
                        <el-form-item label="签约类型">
                            <span style="width: 200px;">首次签约</span>
                        </el-form-item>

                        <el-form-item label="签约周期">
                            <span style="width: 200px;">1年</span>
                        </el-form-item>

                        <el-form-item label="费用">
                            <span style="width: 200px;">￥120元</span>
                        </el-form-item>
                    </el-row>

                    <el-row>
                        <el-form-item label="申请时间">
                            <span style="width: 200px;">2020/10/09 10:09:09</span>
                        </el-form-item>


                        <el-form-item label="生效日期">
                            <el-date-picker v-model="value1" style="width: 200px;height: 40px;" type="date"
                                placeholder="请选择" :size="size" />
                        </el-form-item>

                    </el-row>

                    <el-row>
                        <el-form-item label="签约备注">
                            <el-input v-model="formItem.remark" type="textarea" :rows="3" clearable
                                placeholder="请输入备注信息" style="width: 500px;" maxlength="500" show-word-limit />
                        </el-form-item>
                    </el-row>
                </el-form>

                <div class="divider"></div>


                <div class="button-item">
                    <el-button type="primary">提交审核</el-button>
                    <el-button @click="$router.push('/service/pending')">返回</el-button>
                </div>

            </div>
        </div>
    </el-card>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { UserFilled } from '@element-plus/icons-vue';
const formItem = reactive({})

const size = ref('default')

const value1 = ref('')

const dialogFormVisible = ref(false)

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

</script>

<style scoped>
.span-item {
    font-size: 13px;
    color: #999;
    width: 77px;
    height: 32px;
    padding-right: 12px;
    text-align: center;
}


:deep(.el-select__wrapper) {
    width: 200px;
    height: 40px;
}

.row-item {
    display: flex;
    align-items: center;
}

.el-form-item {
    display: flex;
    align-items: center;
    margin-right: 80px;
}

:deep(.el-form-item__label) {
    font-size: 13px;
    color: #999999;
    width: 77px;
    height: 32px;
}

.row-item-tow {
    margin-right: 80px;
}

.title-pending {
    display: flex;
    align-items: center;
}

.long-string {
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}

.title-pending>span {
    font-weight: 500;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-left: 10px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: rgba(185, 186, 180, 0.849);
    margin-top: 30px;
}

.content-title {
    margin-top: 30px;
}

.title-word {
    font-weight: 500;
    font-size: 16px;
    margin-top: 30px;
}

.message-item {
    width: 200px;
    height: 84px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(242, 242, 242, 1);
    border-radius: 8px;
    padding: 15px;
    margin-right: 15px;
    display: flex;
    justify-content: space-between;

}

.item-row {
    display: flex;
    flex-direction: column;
}

.item-row>p {
    margin-top: 4px;
    margin-bottom: 4px;
}


.row-el {
    display: flex;
    align-items: center;
}

.button-item {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
</style>